<template>
	<view>
		<u-checkbox-group width="38rpx" active-color="#FB683D">
			<view class="content">
				<view v-if="list.length>0">
					<view class="list" v-if="item.show" v-for="(item,index) in list" :key="index">
						<u-checkbox @change="change" shape="circle" v-model="item.checked" :name="index"
							:disabled="false"></u-checkbox>
						<image src="../static/a4.png" @click="delShopCartList(index)" class="del"></image>
						<image :src="img_pre+ item.cover" class="head"></image>
						<view class="goods">
							<view class="name omit2">
								{{item.pname}}{{item.icon}}
							</view>
							<view class="number">
								<view class="left">
									<view class="icon2">
										{{item.specname}}
									</view>
								</view>
							</view>
							<view class="money">
								<view class="left">
									{{item.price}} <text>蜂钻</text>
								</view>
								<view class="right">
									<u-number-box @plus="jia(item.price,item.checked)"
										@minus="jian(item.price,item.checked)" v-model="item.count" class="box" :min="1"
										:max="100"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="none" v-else>
					<view class="none-view">
						<image src="../../../static/image/none.png" class="none-image"></image>
						<view class="none-name">
							购物车竟然是空的，快去购买吧~
						</view>
					</view>
				</view>
			</view>
			<view class="pay">
				<view class="pull-left">
					<u-checkbox shape="circle" @change="changeALL" v-model="checked" name="checked" :disabled="false">
					</u-checkbox>
					<view class="name">
						全选
					</view>
					<view class="number">
						{{price}} <text>蜂钻</text>
					</view>
				</view>
				<button type="default" @click="buy">提交订单</button>
			</view>
		</u-checkbox-group>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				list: [],
				price: 0,
				page: 1,
				icon: false,
				checked: false
			}
		},
		onLoad(option) {
			than = this;
			than.getList()
		},
		onReachBottom() {
			than.page++
			than.getList()
		},
		methods: {
			delShopCartList(index) {
				than.post("api/Product/delShopCartList", {
					shop_cart_id: than.list[index].shop_cart_id
				}, function(data) {
					than.list[index].show = false;
					if (than.list[index].checked) {
						than.price -= than.mul(than.list[index].price, than.list[index].count)
					}

				})
			},
			changeALL(e) {
				if (e.value) {
					for (let j in than.list) {
						if (!than.list[j].checked) {
							than.list[j].checked = true;
							than.price += than.mul(than.list[j].price, than.list[j].count)
						}
					}
				} else {
					for (let j in than.list) {
						if (than.list[j].checked) {
							than.list[j].checked = false;
							than.price -= than.mul(than.list[j].price, than.list[j].count)
						}
					}
				}
			},
			change(e) {
				if (e.value) {
					than.price += than.mul(than.list[e.name].price, than.list[e.name].count)
				} else {
					than.price -= than.mul(than.list[e.name].price, than.list[e.name].count)
				}
			},
			getList() {
				than.post("api/Product/shopCartList", {
					page: than.page
				}, function(data) {
					for (let i in data) {
						data[i].checked = false;
						data[i].show = true;
					}
					if (than.page == 1) {
						than.list = data;
					} else {
						than.list = than.list.concat(data)
					}
				})
			},
			jia(number, checked) {
				if (checked) {
					than.price = than.add(than.price, number)
				}

			},
			jian(number, checked) {
				if (checked) {
					than.price = than.sub(than.price, number)
				}
			},
			buy() {
				if (than.list.length == 0) {
					return false
				}
				var product_arr = [];
				for (let i in than.list) {
					var json = {};
					json.count = than.list[i].count;
					json.pid = than.list[i].pid;
					json.specs_arr = JSON.parse(than.list[i].specs_name);
					product_arr.push(json)
				}
				than.toPage("pay?product_arr=" + JSON.stringify(product_arr) + '&is_car=1')
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F8F8F8;
	}

	.pay {
		position: fixed;
		bottom: 0;
		height: 126rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px -3rpx 14rpx 0px rgba(0, 30, 214, 0.08);
		border-radius: 70rpx 70rpx 0px 0px;
		display: flex;
		align-items: center;

		button {
			float: right;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			line-height: 74rpx;
			background: rgba(237, 112, 67, 1);
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			margin-right: 36rpx;
		}

		.pull-left {
			display: flex;
			align-items: center;
			height: 98rpx;
			padding-left: 36rpx;


			.name {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				margin: 0 15rpx 0 20rpx;
			}

			.number {

				text {
					font-size: 24rpx;
					margin-right: 8rpx;
				}

				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(227, 25, 25, 1);
			}
		}
	}

	.content {
		padding-top: 24rpx;
		width: 750rpx;

		.list {
			margin: 0 36rpx 24rpx;
			display: flex;
			background: #FFFFFF;
			align-items: center;
			border-radius: 12rpx;
			padding-right: 24rpx;
			padding-left: 20rpx;
			position: relative;

			.del {
				width: 33rpx;
				height: 33rpx;
				position: absolute;
				right: 21rpx;
				top: 21rpx;
			}

			.head {
				margin: 36rpx 0 36rpx 20rpx;
				width: 168rpx;
				height: 168rpx;
			}

			.goods {
				margin-left: 23rpx;
				width: 380rpx;

				.name {
					width: 350rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}

				.number {
					display: flex;
					align-items: center;
					margin: 25rpx 0;

					.left {
						.icon2 {
							padding: 5rpx 27rpx;
							background: #F8F8F8;
							border: 1rpx solid #DCDCDC;
							border-radius: 19rpx;
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}
					}

					.right {
						margin-left: auto;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
					}
				}
			}

			.money {
				margin-left: auto;
				display: flex;
				align-items: center;

				.right {
					margin-left: auto;
				}

				text {
					margin-right: 8rpx;
					font-size: 24rpx;
				}

				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(227, 25, 25, 1);
			}
		}
	}
</style>
